<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:thSys="">
<div th:replace="admin/module/macros :: head('编辑文章')"></div>
<body class="app sidebar-mini rtl">
	<main class="app-content">
	<div th:replace="admin/module/macros :: header"></div>
	<div th:replace="admin/module/macros :: sidebar"></div>
	<div class="app-title">
		<div>
			<h1>
				<i class="fa fa-book"></i>修改文章
			</h1>
		</div>
		<ul class="app-breadcrumb breadcrumb">
			<li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
			<li class="breadcrumb-item"><a href="/admin/article">文章管理</a></li>
			<li class="breadcrumb-item">修改文章</li>
		</ul>
	</div>
	<form id="articleFrom" class="form-horizontal">
		<input type="hidden" id="articleContent" name="articleContent">
		<input type="hidden" id="articleContentMd" name="articleContentMd">
		<input type="hidden" id="articleStatus" name="articleStatus">
		<input type="hidden" id="article_id" th:value="${articleCustom.id}" name="id">
		<div class="row">
			<div class="col-md-8">
				<div class="tile">
					<div class="table-responsive">
						<div class="form-group">
							<input class="form-control" th:value="${articleCustom.articleTitle}" name="articleTitle" id="articleTitle" type="text"
								placeholder="输入文章标题">
						</div>
					<!-- 	 <div class="form-group">
							<input class="form-control" name="articleUrl" th:value="${articleCustom.articleUrl}" id="articleUrl" type="text"
								placeholder="默认拼音链接，如果为空则自动生成时间戳链接">
						</div>  -->
						<div class="form-group">
							<textarea class="form-control" id="articleMd" th:text="${articleCustom.articleContentMd}"></textarea>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="tile">
					<div class="form-group row">
						<label class="control-label col-md-3">文章类型:</label>
						<div class="col-md-9">
							<select name="articleType" th:value="${articleCustom.articleType}" class="form-control">
								<optgroup label="请选择">
									<option th:selected="${articleCustom.articleType==0}" value="0">原创</option>
									<option th:selected="${articleCustom.articleType==1}" value="1">转载</option>
								</optgroup>
							</select>
						</div>
					</div>
					<div class="form-group row">
						<label class="control-label col-md-3">开启评论:</label>
						<div class="col-md-9">
							<select name="articleComment" th:value="${articleCustom.articleComment}" class="form-control">
								<optgroup label="请选择">
									<option th:selected="${articleCustom.articleComment==0}" value="0">是</option>
									<option th:selected="${articleCustom.articleComment==1}" value="1">否</option>
								</optgroup>
							</select>
						</div>
					</div>
					<div class="form-group row">
						<label class="control-label col-md-3">文章分类:</label>
						<div class="col-md-9">
							<select name="categorys" class="form-control" id="categorySelect"
								multiple="">
								<optgroup label="点击选择，可多选">
									<option th:each="category :${categorys}" th:value="${category.categoryId}"
										th:text="${category.categoryName}"></option>
								</optgroup>
							</select>
						</div>
					</div>
					<div class="form-group row">
						<label class="control-label col-md-3">文章标签:</label>
						<div class="col-md-9">
							<select name="tags" class="form-control" id="tagSelect"
								multiple="">
								<optgroup label="点击选择，可多选">
									<option th:each="tag :${tags}" th:value="${tag.tagId}"
										th:text="${tag.tagName}"></option>
								</optgroup>
							</select>
							
							<span class="bb" th:each="a:${tagsIds}" th:text="${a}"></span>
						</div>
					</div>
					<div class="form-group row">
						<label class="control-label col-md-3">文章略缩图：</label>
						<div class="col-md-9">
							<div class="input-group">
								<input type="text" class="form-control" id="articleThumbnail"
									name="articleThumbnail" readonly="readonly" th:value="${articleCustom.articleThumbnail}"> <span class="input-group-btn">
									<button class="btn btn-default " type="button"
										th:onclick="'javascript:openChoice(\''+articleThumbnail+'\')'">选择</button>
								</span>
							</div>
						</div>
					</div>
					<div class="form-group row">
						<label class="control-label col-md-3">文章摘要:</label>
						<div class="col-md-9">
							<textarea class="form-control" th:text="${articleCustom.articleSummary}" th:value="${articleCustom.articleSummary}" name="articleSummary" rows="3"></textarea>
						</div>
					</div>
					<div class="tile-footer">
						<button class="btn btn-outline-secondary" onclick="save(1)"
							type="button">保存草稿</button>
						<button class="btn btn-outline-primary pull-right" onclick="save(0)" type="button">发布文章</button>
					</div>
				</div>
			</div>
		</div>
	</form>
	</main>
	<div th:replace="admin/module/macros :: comm"></div>
	<script src="/plugins/layer/layer.js"></script>
	<script
		src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
	<script src="/plugins/pinyinjs/pinyin_dict_notone.js"></script>	
	<script src="/plugins/pinyinjs/pinyinUtil.js"></script>	
	<script src="/plugins/inline-attachment/codemirror-4.inline-attachment.min.js"></script>
	<script type="text/javascript">
   var simplemde = new SimpleMDE({ 
	   element: document.getElementById("articleMd"),
	   //如果设置为true，则强制下载Font Awesome（用于图标）。如果设置为false，则阻止下载。默认为undefined，将智能检查是否已包含Font Awesome，然后相应下载。
	   autoDownloadFontAwesome:false,
	   //如果设置为true，则自动对焦编辑器。默认为false。
	   autofocus:true,
	   //自动保存
	  /*  autosave:{
		    //如果设置为true，则自动保存文本。默认为false。
			enabled:true,
			//保存之间的延迟，以毫秒为单位。默认为10000（10s）。
			delay:5000,
			//您必须设置唯一的字符串标识符，以便SimpleMDE可以自动保存。将此与您网站上其他地方的SimpleMDE实例区分开来的东西。
			uniqueId:1
	   }, */
	   //调整预览期间解析Markdown的设置
	   renderingConfig:{
		   ///如果设置为true，将使用highlight.js突出显示
		   codeSyntaxHighlighting:true
	   },
	   //要显示的图标名称数组。可用于显示默认隐藏的特定图标，而无需完全自定义工具栏。
	   showIcons: ["code", "table"],
	   //如果设置，则自定义选项卡大小。默认为2。
	   tabSize:4,
   });
   $(function(){
	    var PC = IsPC();
	    if (PC) {
	    	var style = document.createElement("style");
	    	style.type = "text/css";
	    	try{
	    	　　style.appendChild(document.createTextNode(".CodeMirror{height: 500px;z-index: 9999;}.editor-toolbar{z-index: 9999  !important;}"));
	    	}catch(ex){
	    	　　style.styleSheet.cssText = ".CodeMirror{height: 500px;z-index: 9999;}.editor-toolbar{z-index: 9999  !important;}";
	    	}
	    	var head = document.getElementsByTagName("head")[0];
	    	head.appendChild(style);
	    }
	    function IsPC() {
	        var userAgentInfo = navigator.userAgent;
	        var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
	        var flag = true;
	        for (var v = 0; v < Agents.length; v++) {
	            if (userAgentInfo.indexOf(Agents[v]) > 0) {
	                flag = false;
	                break;
	            }
	        }
	        return flag;
	    }
	    //编辑器拖拽文件上传
		inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
	      	uploadUrl: "/admin/attachment/upload"
	    });
		 //生成url链接
		   $("#articleTitle").blur(function(){
			   $.ajax({
				  url:"/admin/article/filter",
				  type:"post",
				  data:{"articleTitle":pinyinUtil.getPinyin($("#articleTitle").val())},
				  dataType:"json",
				  success:function(data){
					  $("#articleUrl").val(data.msg);
				  }
			   });
		   });  
		 
	    $('#categorySelect').select2();
		$('#tagSelect').select2();
		//设置默认选择
		$.ajax({
			   url:"/admin/article/ids",
			   type:"post",
			   async: false,
			   data:{"article_id":$("#article_id").val()},
			   dataType:"json",
			   success:function(data){
				   console.log(data);
				   $('#categorySelect').val(data.categorysIds).trigger('change');
				   $('#tagSelect').val(data.tagsIds).trigger('change');
			   }
		   })  
   });
 	//选择略缩图
	function openChoice(id){
		layer.open({
			type : 2,
			title : '所有附件',
			anim : 2,
			area : [ '90%', '90%' ],
			maxmin : true,
			shadeClose: true,
			content : "/admin/profile/openChoice/" + id
		});
	}
 	//保存文章
 	function save(articleStatus){
 		var contentMd=simplemde.value();
 		if(contentMd!=""){
 			$("#articleContentMd").val(contentMd);
 			$("#articleContent").val(simplemde.markdown(contentMd));
 			$("#articleStatus").val(articleStatus);
			var obj=$("#articleFrom").serialize();
 				$.ajax({
 					type : "post",
 					url : "/admin/article/new/save",
 					data : obj,
 					dataType : "json",
 					async: false,
 					success : function(data){
 						if(data.flag==true){
 							simplemde.clearAutosavedValue();
 	 						 $.toast({
 	 	                         text: data.msg,
 	 	                         heading: '提示',
 	 	                         icon: 'success',
 	 	                         showHideTransition: 'fade',
 	 	                         allowToastClose: true,
 	 	                         hideAfter: 1000,
 	 	                         stack: 1,
 	 	                         position: 'top-center',
 	 	                         textAlign: 'left',
 	 	                         loader: true,
 	 	                         loaderBg: '#ffffff',
 	 	                         afterHidden: function () {
 	 	                        	 window.location.href = "/admin/article"; 
 	 	                         }
 	 	                     });
 						}else{
 							showMsg(data.msg,"error","3000");
 						}
 					}
 				});
 		}else{
            showMsg("请输入文章内容！","error","3000");
        }
 	}
   </script>
</body>
</html>